<template>
	<view class="container">
		<view class="item" v-for="item in icons" :key="item.name" @click="copy(item.name)">
			<wxn-icon :name="item.name"></wxn-icon>
			<view class="name">{{item.name}}</view>
		</view>


	</view>
</template>

<script>
	import {copy} from '../../../common/tools'
	export default {
		data() {
			return {
				icons: [{
						name: 'jiahao'
					}, {
						name: 'weixin'
					}, {
						name: 'xin'
					},
					{
						name: 'fujian'
					},
					{
						name: 'dianzan'
					},
					{
						name: 'duihao'
					},
					{
						name: 'xiaoxi'
					},
					{
						name: 'cengji'
					},
					{
						name: 'shanchu'
					},
					{
						name: 'shijian'
					},
					{
						name: 'didian'
					},
					{
						name: 'xinghao'
					}
				]

			};
		},
		methods:{
			copy(name){
				copy(name)
			}
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-wrap: wrap;

		.item {
			width: 25%;
			height: calc(100vw / 4);
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			color: #666666;
			.name{
				margin-top: 15rpx;
			}
		}
	}
</style>